<template>
    <div class="stat-item" :class="`stat-${type}`">
        <div class="stat-icon">{{ icon }}</div>
        <div class="stat-content">
            <div class="stat-value">{{ value }}</div>
            <div class="stat-label">{{ label }}</div>
            <div class="stat-trend" :class="trend > 0 ? 'up' : 'down'">
                <el-icon>
                    <ArrowUp v-if="trend > 0" />
                    <ArrowDown v-else />
                </el-icon>
                {{ Math.abs(trend) }}%
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';

defineProps({
    icon: String,
    label: String,
    value: [String, Number],
    trend: [String, Number],
    type: {
        type: String,
        default: 'primary'
    }
});
</script>

<style scoped>
.stat-item {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    font-size: 2.5em;
    margin-right: 15px;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-content {
    flex-grow: 1;
}

.stat-value {
    font-size: 1.8em;
    font-weight: bold;
}

.stat-label {
    color: #6c757d;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.stat-trend {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.stat-trend.up {
    color: #67c23a;
}

.stat-trend.down {
    color: #f56c6c;
}

/* Color schemes */
.stat-primary .stat-icon {
    background-color: #e8f0fe;
    color: #409eff;
}

.stat-primary .stat-value {
    color: #409eff;
}

.stat-success .stat-icon {
    background-color: #e6f4ea;
    color: #67c23a;
}

.stat-success .stat-value {
    color: #67c23a;
}

.stat-warning .stat-icon {
    background-color: #fdf6ec;
    color: #e6a23c;
}

.stat-warning .stat-value {
    color: #e6a23c;
}

.stat-danger .stat-icon {
    background-color: #fef0f0;
    color: #f56c6c;
}

.stat-danger .stat-value {
    color: #f56c6c;
}
</style>